import React, { Component } from 'react'
import { Button, Table, Space, Popconfirm, Select, Input  } from 'antd'
import {
  PlusOutlined,
  UnorderedListOutlined,
  AppstoreOutlined
} from '@ant-design/icons'
import { getUserslist, addUser, editUser } from '../../api/userslist'


let headerLiStyle = {
  border: '2px solid rgba(215, 215, 215, 1)',
  marginRight: 20
}


const { Option } = Select
const { Search } = Input

export default class AbroadMeeting extends Component {
  state = {
    userslist: [],
    editFormVisible: false,
    currentEdit: {},
    isEdit: false,
    value: 1
  }

  // 定义表格的第一行中的各类属性
  columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '用户名（手机号）',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '工作编号',
      dataIndex: 'worknumber',
      key: 'worknumber',
    },
    {
      title: '部门',
      key: 'section',
      dataIndex: 'section'
    },
    {
      title: '职位',
      key: 'job',
      dataIndex: 'job'
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <a href='/'>设置权限</a>
          <a href="/" onClick={e => {
            e.preventDefault()
            this.setVisible(true)
            this.setState({
              currentEdit: record,
              isEdit: true
            })
          }}>编辑</a>
          <Popconfirm
            title="是否确认删除？"
            onConfirm={() => this.confirm(record)}
            onCancel={this.cancel}
            okText="确定"
            cancelText="取消"
          >
            <a href="/">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  // 每行单选，全选功能
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  }

  // 组件挂载后， ajax 请求用户的数据
  componentDidMount() {
    getUserslist().then(res => {
      this.setState({
        userslist: res.body.userslist
      })
    })
  }

  // 选中功能
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  // 在筛选列表中 改变筛选条件 可执行的事件  --- 暂时没有写到
  // handleChange = value => {
  //   console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
  // }

  onCreate = values => {
    console.log('Received values of form: ', values)
    if (this.state.isEdit) { // 修改
      editUser(values).then(res => {
        // console.log('修改响应：', res)

        // 将修改成功的用户信息替换掉 state 中 users 数组对应的用户
        const newUserslist = this.state.userslist.map(userslist => {
          if (userslist.id === res.body.userslist.id) {
            return {
              ...userslist,
              ...res.body.userslist
            }
          }
          return userslist
        })
        this.setState({
          userslist: newUserslist
        })

        // 修改成功，则关闭对话框
        this.setVisible(false)
      }).catch(e => console.log('修改异常：', e))
    } else { // 添加
      addUser(values).then(res => {
        console.log(res)
        // 将添加成功的用户信息保存到 users 数组中
        const newUserslist = [
          res,
          ...this.state.userslist
        ]
        this.setState({
          users: newUserslist
        })

        // 添加成功，则关闭对话框
        this.setVisible(false)
      }).catch(e => console.log('添加异常：', e))
    }
  }

  // 设置编辑对话框是否可见
  setVisible = visible => {
    this.setState({
      editFormVisible: visible
    })
  }

  render() {
    const { loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    const hasSelected = selectedRowKeys.length > 0

    return (
      <>
        <h2 style={{ fontSize: 25, fontWeight: 800 }}>国际会议</h2>
        <div className="users-list" style={{/*  height: 100, */ background: 'rgba(242, 242, 242, 1)' }}>
          <h3 style={{ fontSize: 26, fontWeight: 400, border: '2px solid rgba(215, 215, 215, 1)', paddingLeft: 15 }} >
            {<AppstoreOutlined />}筛选</h3>
          <ul className="users-list-search" style={{ display: 'flex', listStyle: 'none' }}>
            <li style={{ marginRight: 20 }}>
              <Select
                labelInValue
                defaultValue={{ value: '选择部门' }}
                style={{ width: 120 }}
                onChange={this.handleChange} //改变筛选列表条件可调用的函数-还未写
              >
                <Option value="销售部">销售部</Option>
                <Option value="市场部">市场部</Option>
              </Select>
            </li>
            <li style={{ marginRight: 20 }}>
              <Select
                labelInValue
                defaultValue={{ value: '选择大区' }}
                style={{ width: 120 }}
                onChange={this.handleChange}
              >
                <Option value="华南区">华南区</Option>
                <Option value="华北区">华北区</Option>
              </Select>
            </li>
            <li style={{ marginRight: 20 }}>
              <Select
                labelInValue
                defaultValue={{ value: '选择地区' }}
                style={{ width: 120 }}
                onChange={this.handleChange}
              >
                <Option value="北上广">北上广</Option>
                <Option value="京津冀">京津冀</Option>
              </Select>
            </li>
            <li style={{ marginRight: 20 }}>
              <Select
                labelInValue
                defaultValue={{ value: '选择职务' }}
                style={{ width: 120 }}
                onChange={this.handleChange}
              >
                <Option value="市场经理">市场经理</Option>
                <Option value="产品经理">产品经理</Option>
              </Select>
            </li>
            <li>
              <Search
                placeholder="输入手机号或姓名"
                onSearch={value => console.log(value)}
                enterButton="搜索"
                style={{ width: 200 }}
              />
            </li>
          </ul>
        </div>
        {/* 用户管理表头部分  */}
        <div className="users-list-header" style={{ fontSize: 25, fontWeight: 400, border: '2px solid rgba(215, 215, 215, 1)', paddingLeft: 15, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(242, 242, 242, 1)', flexWrap: 'wrap' }}>
          <h4 style={{ fontSize: 20 }}> {<UnorderedListOutlined />}会议列表</h4>
          <ul style={{ display: 'flex', listStyle: 'none', fontSize: 18, marginTop: 10 }}>
            <Button type="primary" style={headerLiStyle} onClick={() => {
              this.setVisible(true)
              this.setState({ isEdit: false })
            }}>
              {<PlusOutlined />}添加
            </Button>
          </ul>
        </div>

        {/* 用户管理表格内容 */}
        <div className="users-list-main">
          <div>
            <Table
              rowSelection={rowSelection}
              columns={this.columns}
              dataSource={this.state.userslist}
              rowKey="id"
              pagination={{
                pageSize: 10,
                total: 60
              }}
            />
            <div style={{ marginBottom: 16 }}>
              <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
                批量删除
              </Button>
            </div>
          </div>
        </div>
      </>
    )
  }
}
